<template>
    <div id="classification">
        <div class="class_item" v-for="(name) in classification" :key="name.catalogueName">
            <head-title :title="name.catalogueName" ></head-title>
            <div class="jgg" >
                <jiugongge :subdivide="name.catalogueId" ></jiugongge> 
            </div>
        </div>
    </div>
</template>

<script>
import headTitle from "../../components/headTitle.vue"
import jiugongge from "../../components/jiugongge.vue"

import { getAbove } from "../../api/Catalogue"

export default {
    name: 'Classification',
    components:{jiugongge,headTitle},
    data() {
        return {
            classification:[],//大致分类
            subdivide:[]//细分
        };
    },

    mounted() {
        this.List()
    },
   
    methods: {
        async  List(){
            let {data}= await getAbove();
                if (data.code==200) {
                    this.classification=data.data
                }else{
                
            }  
        },
    
    },
};
</script>

<style lang="scss" scoped>
    #classification{
        width: 100vw;
        .jgg{
            margin: auto;
            width: 98%;
            height: 23vh;
        }
    }
    .clamain{
       height: 20vh;
        width: 100vw;
        padding: 0 2vw;
    }
    .imgItem{
        width: 48%;
    }
</style>